<template>
  <div class="scoring-module">
    <!--
    <div class="header">
      <div class="title">个人飞行赛-选手计分页面</div>
      <img class="ico-logo" src="@/assets/logo-fii.png" />
    </div>
    -->
    <div class="content">
      <div class="flying-race-box">
        <div class="flying-race-logo-wrap">
          <img class="flying-race-logo" src="@/assets/logo-race.png" />
        </div>
        <div class="flying-race-info">
          <div class="flying-race-title">{{ contestInfo.matchName || '' }}</div>
          <div class="flying-race-labels">
            <div class="flying-race-label">科目：{{ contestInfo.matchItemName || '-' }}</div>
          </div>
          <div class="flying-race-tags">
            <!-- <div class="flying-race-tag">{{ contestInfo.matchItemName || '-' }}</div> -->
            <div class="flying-race-tag">{{ contestInfo.userName || '-' }}</div>
            <div class="flying-race-tag">{{ queryForm.id || '-' }}</div>
            <div class="flying-race-tag">{{ contestInfo.company || '-' }}</div>
          </div>
        </div>
      </div>

      <div class="form-query-box">
        <div class="form-box">
          <div class="form-item">
            <span class="form-item-label">学员ID：</span>
            <el-input class="form-item-val" v-model="queryForm.id" placeholder="" @blur="handleQuery" disabled></el-input>
          </div>
          <div class="form-item">
            <span class="form-label">比赛场地：</span>
            <el-input class="form-item-val" v-model="queryForm.site" placeholder="" disabled></el-input>
          </div>
          <div class="aircraft-count-box">
            <span class="aircraft-title">飞行器数量:</span>
            <div class="aircraft-checkbox-box">
              <el-radio-group v-model="aircraftCount" class="scoring-radio">
                <el-radio :value="1">1台</el-radio>
                <el-radio :value="2">2台</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="basic-score-box">
            <span class="basic-title">基础编程分:</span>
            <div class="basic-radio-box">
              <el-radio-group v-model="basicScore" @change="onScoreChange(basicScore)" class="scoring-radio">
                <el-radio :value="20">是</el-radio>
                <el-radio :value="0">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <!-- <el-button class="btn-query" @click="handleQuery" type="primary">查询</el-button> -->
          <el-button class="btn-reset" @click="handleCancel" type="default">重置</el-button>
        </div>
      </div>

      <div class="scoring-table-box" v-for="(count, countIdx) in scoringData.length" :key="count">
        <div class="scoring-table-header">
          <div class="scoring-table-title">第{{ getRoundCn(countIdx) }}轮</div>
          <div class="form-btns-box">
            <el-button class="form-btn btn-set-full" @click="handleSetFull(countIdx)" type="primary">一键满分</el-button>
            <el-button class="form-btn btn-set-zero" @click="handleSetZero(countIdx)" type="primary">飞行环节0分</el-button>
          </div>
        </div>
        <div class="scoring-table-wrap">
          <div class="scoring-table-inner-wrap">
            <div class="scoring-table-inner">
              <div class="scoring-table-count">
                <span>得</span><span>分</span><span>区</span>
              </div>
              <el-table class="scoring-table" :data="[ scoringData[countIdx] ]" :header-cell-style="{ background: '#F5F7FA', color: '#333', }">
                <el-table-column :prop="scoringItem.prop" :label="scoringItem.label" :align="scoringItem.align" v-for="(scoringItem, scoringIdx) in scoringColumn" :key="scoringIdx">
                  <template #header>
                    <span class="cell-header" v-html="scoringItem.label"></span>
                  </template>
                  <template #default="scope">
                    <el-select v-if="scoringItem.type === 'select'" v-model="scope.row[scoringItem.prop]" class="scoring-select" placeholder="请选择">
                      <el-option :value="scoringScore.value" :label="scoringScore.label" v-for="(scoringScore, scoringScoreIdx) in scoringItem.options" :key="scoringScoreIdx"></el-option>
                    </el-select>
                    <el-input v-else-if="scoringItem.type === 'number'" v-model.number="scope.row[scoringItem.prop]" class="scoring-ipt" type="number" :min="0" placeholder="请输入"></el-input>
                    <el-radio-group v-else v-model="scope.row[scoringItem.prop]" :disabled="isBaseZero || checkIsDis(scoringItem.prop)" class="scoring-radio">
                      <el-radio :value="true">是</el-radio>
                      <el-radio :value="false">否</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="scoring-table-inner">
              <div class="scoring-table-count">
                <span>扣</span><span>分</span><span>区</span>
              </div>
              <el-table class="scoring-table" :data="[ deductionData[countIdx] ]" :header-cell-style="{ background: '#F5F7FA', color: '#333', }">
                <el-table-column :prop="deductionItem.prop" :label="deductionItem.label" :align="deductionItem.align" :width="deductionItem.width" v-for="(deductionItem, deductionIdx) in deductionColumn" :key="deductionIdx">
                  <template #default="scope">
                    <el-input v-model.number="scope.row[deductionItem.prop]" class="scoring-ipt" :class="isGameOver ? 'scoring-ipt-wran' : ''" type="number" :min="0" placeholder="请输入"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="count-box">
            <div class="scoring-box">
              <el-button class="btn-scoring" @click="handleScoring(countIdx)" type="primary">计分</el-button>
              <div class="scoring-count">{{ currScoreArr[countIdx] || 0 }}</div>
              <div class="scoring-unit">分</div>
            </div>
            <div class="scoring-time-box">
              <div class="time-label-wrap">
                <div class="time-label">时间</div>
                <div class="time-count">{{ currSecondsArr[countIdx] || '0' }}</div>
              </div>
              <div class="timer-box">
                <el-input v-model.number="secondsItemArr[countIdx].minute" class="timer-item-ipt" type="number" :min="0" @blur="handleScoring(countIdx)"></el-input>
                <div class="timer-split">:</div>
                <el-input v-model.number="secondsItemArr[countIdx].second" class="timer-item-ipt" type="number" :min="0" @blur="handleScoring(countIdx)"></el-input>
                <div class="timer-split">:</div>
                <el-input v-model="secondsItemArr[countIdx].millisecond" class="timer-item-ipt" :min="0" :max="999" @blur="handleScoring(countIdx)"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="form-btns-box">
        <el-button class="form-btn btn-cancel" @click="handleCancel" type="default">取消</el-button>
        <el-button class="form-btn btn-submit" @click="handleSubmit" type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch, onMounted, computed, } from "vue";
import {ElMessage} from "element-plus";
import baseService from "@/service/baseService";
import { useRoute } from 'vue-router';

const contestInfo = ref({
  id: '',
  company: '',
  matchItemName: '',
  matchItemTeamId: '',
  matchName: '',
  userId: '',
  userName: ''
});
const userInfo = ref({
  name: '',
  code: '',
  school: '',
});

const queryForm = reactive({
  id: '',
  site: '',
});

const secondsItemDefault = {
  minute: 0,
  second: 0,
  millisecond: 0,
}
const scoringDataDefault = {
  add2: null,
  add3: null,
  add4: null,
  add5: null,
  add6: null,
  add7: null,
  add8: null,
  add9: null,
  add10: null,
  add11: null,
  add12: null,
};
const deductionDataDefault = {
  sub1: 0,
  sub2: 0,
}

const disArr = ref<string[]>([]);
const aircraftCount = ref(null);
const basicScore = ref(0);
const currScoreArr = ref([0, 0]);
const maxSeconds = 600;
const defaultSecondsStr = `00″00`;
const maxSecondsStr = `${ maxSeconds }″00`;
const currSecondsArr = ref([defaultSecondsStr, defaultSecondsStr]);
const secondsItemArr = ref([{ ...secondsItemDefault }, { ...secondsItemDefault }]);
const isJunior = ref(false);
const maxScore = computed(() => isJunior.value ? 200 : 240);
const isBaseZero = ref(false);
const isGameOver = ref(false);

const scoringColumn = [
  {
    prop: 'add2',
    label: '绕竖杆<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add3',
    label: '绕横杆<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add4',
    label: '穿竖圈<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add5',
    label: '穿横圈<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add6',
    label: '绕横8字<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add7',
    label: '绕竖8字<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add8',
    label: '变色穿圈<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add9',
    label: '穿高低圈<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add10',
    label: '垂直8字<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add11',
    label: '连环穿圈<br/>(20分)',
    score: 20,
    align: 'center',
  },
  {
    prop: 'add12',
    label: '定点起降<br/>(20分)',
    score: 20,
    align: 'center',
  },
];
const scoringColumnMap = ref(new Map<string, number>([]));
const scoringData = ref([{ ...scoringDataDefault }, { ...scoringDataDefault }]);

const deductionColumn = [
  {
    prop: 'sub1',
    label: '碰撞道具(10分/科目)',
    score: 10,
    align: 'center',
  },
  {
    prop: 'sub2',
    label: '飞机碰撞(10分/次)',
    score: 10,
    align: 'center',
  },
];
const deductionColumnMap = ref(new Map<string, number>([]));
const deductionData = ref([{ ...deductionDataDefault }, { ...deductionDataDefault }]);

const onScoreChange = (score) => {
  if(score === 0) {
    dataInit(true);
  } else {
    isBaseZero.value = false;
  }
}

watch([
  () => basicScore.value,
  () => scoringData.value,
  () => deductionData.value,
], () => {
  handleScoring(0);
  handleScoring(1);
}, { deep: true, });

onMounted(() => {
  const route = useRoute()
  const id = route.query.id as string;
  const dis = route.query.dis as string;
  const groupId = route.query.groupId as string;
  queryForm.id = id;
  isJunior.value =  groupId === '100301' ? true : false;    //(dis || '').includes('add8') || (dis || '').includes('add9');
  disArr.value = (dis || '').split(',').filter(a => a).map(a => [a, a.replace(/(add([\d]*))/g, '$1_2')]).flat();
  dataInit();
  handleQuery();

  contestInfo.value = {
    id: '',
    company: '',
    matchItemName: '',
    matchItemTeamId: '',
    matchName: '',
    userId: '',
    userName: ''
  };

  userInfo.value = {
    name: '',
    code: '',
    school: '',
  };

  scoringColumnMap.value = getScoringColumnMap();
  deductionColumnMap.value = getDeductionColumnMap();
});

const handleQuery = () => {
  baseService.get("/front/spuser/queryUserByTeamUserId", {
    id: queryForm.id
  }).then((res) => {
    if (res.code === 0) {
      setQueryData(res?.data || {});
    }
  });
}

const handleReset = () => {
  queryForm.id = '';
  queryForm.site = '';
  handleQuery();
}

const handleScoring = (countIdx: number) => {
  currScoreArr.value[countIdx] = Math.max(0, countBasicScore() + countScoring(countIdx) - countDeduction(countIdx));
  currSecondsArr.value[countIdx] = countSeconds(countIdx);
  secondsItemArr.value[countIdx] = countSecondsItem(...currSecondsArr.value[countIdx].split('″').map(s => parseInt(s)));
}

const handleCancel = () => {
  dataInit();
}
const handleSubmit = () => {
  if (!aircraftCount.value) return ElMessage.error('请先选择飞行器数量');
  if (basicScore.value === '') return ElMessage.error('请先为基础编程分打分');
  if (!isBaseZero.value && !checkIsCount()) return ElMessage.error('需完成打分后方可提交');
  if (checkTimeZero()) return ElMessage.error('需完成打分后方可提交');
  if (checkIsExceed()) return ElMessage.error(`分数最高不能超过${ maxScore.value }`);
  const params = getSubmitParams();
  baseService.post("/front/spuser/saveScore", params).then((res) => {
    if (res.code === 0) {
      ElMessage.success('保存成功');
      handleQuery();
      refreshData();
    }
  });
  dataInit();
}

const getSubmitParams = () => {
  const params = {
    id: queryForm.id,
    userId: contestInfo.value.userId,
    site: queryForm.site,
    matchItemTeamId: contestInfo.value.matchItemTeamId,
    num: aircraftCount.value,
    add1: basicScore.value || 0,
    add11: basicScore.value || 0,
    score: currScoreArr.value[0] || 0,
    score2: currScoreArr.value[1] || 0,
    seconds: currSecondsArr.value[0] || 0,
    seconds2: currSecondsArr.value[1] || 0,
  };

  scoringData.value.forEach((b, idx) => {
    Object.keys(b).forEach((key) => {
      let newKey = idx ? key.replace(/(add([\d]*))/g, '$1_2') : key;
      params[newKey] = scoringData.value[idx][key] || false;
    })
  });

  deductionData.value.forEach((b, idx) => {
    Object.keys(b).forEach((key) => {
      let newKey = idx ? key.replace(/(sub([\d]*))/g, '$1_2') : key;
      params[newKey] = deductionData.value[idx][key] || 0;
    })
  });

  let timeMap = { 'minute': 'mm', 'second': 'ss', 'millisecond': 'ms' };
  secondsItemArr.value.forEach((b, idx) => {
    Object.keys(b).forEach((key) => {
      let newKey = `${ timeMap[key] }${ idx ? '2' : '' }`;
      params[newKey] = (secondsItemArr.value[idx][key] || 0) * 1;
    })
  });

  return params;
}

const setQueryData = (data) => {
  contestInfo.value = data;
  const scoring = data.scoring || {};
  basicScore.value = scoring.add1 !== undefined ? (scoring.add1 || 0) * 1 : '';
  aircraftCount.value = (scoring.num !== undefined || scoring.num !== null) ? scoring.num*1 : null;
  queryForm.site = scoring.site;
  currScoreArr.value = [ data.score || 0, data.score2 || 0 ];
  currSecondsArr.value = [ scoring.seconds ? scoring.seconds.replace('.', '″') : defaultSecondsStr, scoring.seconds2 ? scoring.seconds2.replace('.', '″') : defaultSecondsStr ];

  scoringData.value.forEach((b, idx) => {
    Object.keys(b).filter(p => !checkIsDis(p)).forEach((key) => {
      let newKey = idx ? key.replace(/(add([\d]*))/g, '$1_2') : key;
      scoringData.value[idx][key] = scoring[newKey] === undefined || scoring[newKey] === null ? null : scoring[newKey] == 'true';
    })
  });

  deductionData.value.forEach((b, idx) => {
    Object.keys(b).forEach((key) => {
      let newKey = idx ? key.replace(/(sub([\d]*))/g, '$1_2') : key;
      deductionData.value[idx][key] = scoring[newKey] || 0;
    })
  });

  if(scoring.mm && scoring.mm2) {
    let timeMap = { 'minute': 'mm', 'second': 'ss', 'millisecond': 'ms' };
    secondsItemArr.value.forEach((b, idx) => {
      Object.keys(b).forEach((key) => {
        let newKey = `${ timeMap[key] }${ idx ? '2' : '' }`;
        secondsItemArr.value[idx][key] = scoring[newKey] || 0;
      })
    });
  }
}

const GetRequest=(value: any)=>{
  var url = decodeURI(window.location.search);
  debugger
  var object = {} as any;
  if (url.indexOf("?") != -1)
  {
    var str = url.substr(1);
    var strs = str.split("&");
    for (var i = 0; i < strs.length; i++) {
      object[strs[i].split("=")[0]] = strs[i].split("=")[1];//得到{id:'123456',name:'www'}
    }
  }
  return object[value];
}

const checkIsDis = (prop = '') => {
  return disArr.value.some(p => p == prop);
}

const handleSetFull = (countIdx: number) => {
  basicScore.value = 20;
  setScoring(countIdx, 'full');
  handleScoring(countIdx);
}
const handleSetZero = (countIdx: number) => {
  setScoring(countIdx, 'zero');
  secondsItemArr.value[countIdx] = countSecondsItem(maxSeconds);
  handleScoring(countIdx);
}

const getScoringColumnMap = () => {
  let map = new Map<string, number>();
  scoringColumn.forEach((b) => {
    map.set(b.prop, b.score || 0);
  });
  return map;
};

const getDeductionColumnMap = () => {
  let map = new Map<string, number>();
    deductionColumn.forEach((b) => {
    map.set(b.prop, b.score || 0);
  });
  return map;
};

const countBasicScore = () => {
  return basicScore.value || 0;
}
const countScoring = (countIdx: number) => {
  const cur = scoringData.value[countIdx];
  return Object.keys(cur).reduce((scoringPrev, scoringKey: string) => {
    if(cur[scoringKey]) {
      return scoringPrev + (scoringColumnMap.value.get(scoringKey) || 0);
    } else {
      return scoringPrev;
    }
  }, 0);
}
const countDeduction = (countIdx: number) => {
  const cur = deductionData.value[countIdx];
  return Object.keys(cur).reduce((scoringPrev, scoringKey: string) => {
    return scoringPrev + (deductionColumnMap.value.get(scoringKey) || 0) * (cur[scoringKey] || 0);
  }, 0);
}
const countSeconds = (countIdx: number) => {
  let { minute, second, millisecond } = secondsItemArr.value[countIdx];
  millisecond = parseInt(millisecond + '') || 0;
  let integerSecond = (minute || 0) * 60 + (second || 0)*1;
  if(integerSecond + millisecond / 1000 > maxSeconds) {
    return maxSecondsStr;
  }
  return `${ Math.min(maxSeconds, integerSecond) }″${ String(millisecond || 0).slice(0, 2).padStart(2, '0') }`;
}

const countSecondsItem = (totalSeconds = 0, millisecond = 0) => {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return {
    minute: minutes,
    second: seconds,
    millisecond: String(millisecond).padStart(2, '0'),
  }
}

const getRoundCn = (roundIdx: number) => {
  return '一二三四五六七八九'[roundIdx];
}

const checkIsCount = () => {
  let isScoringCount = scoringData.value.every(b => Object.keys(scoringDataDefault).some(key => scoringDataDefault[key] != b[key]));
  let isDeductionCount = deductionData.value.every(b => Object.keys(deductionDataDefault).some(key => deductionDataDefault[key] != b[key]));
  return isScoringCount || isDeductionCount;
}

const checkTimeZero = () => {
  return currSecondsArr.value.some(s => s.split('″').every(s => !parseInt(s)));
}

const checkIsExceed = () => {
  return currScoreArr.value.some(score => score > maxScore.value);
}

const dataInit = (isZero = false) => {
  scoringData.value = [{ ...scoringDataDefault }, { ...scoringDataDefault }];
  deductionData.value = [{ ...deductionDataDefault }, { ...deductionDataDefault }]
  secondsItemArr.value = [...new Array(2)].map(() => countSecondsItem(0));
  isGameOver.value = false;
  isBaseZero.value = isZero;
  currScoreArr.value = [0, 0];
  currSecondsArr.value = [defaultSecondsStr, defaultSecondsStr];
  if (!isZero) {
    basicScore.value = '';
    aircraftCount.value = null;
  } else {
    secondsItemArr.value = [...new Array(2)].map(() => countSecondsItem(maxSeconds));
  }
}

const setScoring = (countIdx: number, type = 'reset') => {
  const scoringItem = scoringData.value[countIdx];
  Object.keys(scoringItem).filter(p => !checkIsDis(p)).forEach(key => {
    (scoringData.value[countIdx] as any)[key] = type === 'full' ? true : type === 'zero' ? false : null;
  });
}

const refreshData = () => {
  window.parent.postMessage({
    data: "params"
  },'*');
}
</script>

<style lang="scss" scoped>
.scoring-module {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 1140px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  box-sizing: border-box;
  align-items: center;
  background: #00A0E9;

  .title {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
  }

  .ico-logo {
    width: 115px;
    height: 40px;
  }
}

.content {
  margin-top: 0px;
  width: 1140px;
  //min-height: 850px;
  padding: 0 24px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12px;
}

.flying-race-box {
  display: flex;
  align-items: center;
  width: 1090px;
  height: 48px;
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  background: linear-gradient(-90deg, #FBFBFB 0%, #EFF6FF 100%);
  border-radius: 12px;
  .flying-race-logo-wrap {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #00A0E9;
    border-radius: 50%;
    .flying-race-logo {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .flying-race-info {
    margin-left: 16px;
    display: flex;
    align-items: center;
    .flying-race-title {
      color: #333;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
    }
  }
  .flying-race-labels {
    margin-left: 24px;
    display: flex;
    align-items: center;
    .flying-race-label {
      color: #333;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      & + .flying-race-label {
        margin-left: 24px;
      }
    }
  }
  .flying-race-tags {
    margin-left: 24px;
    display: flex;
    align-items: center;
    .flying-race-tag {
      color: #00A0E9;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      & + .flying-race-tag {
        margin-left: 16px;
      }
    }
  }
}

.form-query-box {
  margin-top: 24px;
  display: flex;
  align-items: center;
}
.form-box {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  .form-item {
    display: flex;
    align-items: center;
    & + .form-item {
      margin-left: 24px;
    }
    .form-item-label {
      font-weight: 400;
      font-size: 16px;
      color: #333;
      line-height: 22px;
    }
    .form-item-val {
      margin-left: 4px;
      width: 180px;
      height: 32px;
      :deep(.el-input__wrapper) {
        background-color: #fff !important;
      }
    }
  }
  .btn-query {
    margin-left: 18px;
    width: 68px;
    height: 32px;
    border-radius: 6px;
  }
  .btn-reset {
    margin-left: 12px;
    width: 68px;
    height: 32px;
    border-radius: 6px;
  }
}
.aircraft-count-box {
  margin: 0 15px 0 24px;
  display: flex;
  align-items: center;
  .aircraft-title {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
  }
  .aircraft-checkbox-box {
    margin-left: 10px;
    .scoring-checkbox {
      :deep(.el-radio) {
        margin-right: 16px;
        &:last-of-type {
          margin-right: 0;
        }
        .el-radio__input {
          &.is-checked {
            .el-radio__inner:after {
              background-color: #00A0E9;
              border-radius: 0;
              border-color: #ffffff;
              transform: rotate(45deg) scaleY(1);
            }
          }
        }
        .el-radio__inner {
          border-radius: 2px;
          &::after {
            border: 1px solid transparent;
            border-left: 0;
            border-top: 0;
            box-sizing: content-box;
            content: "";
            height: 7px;
            left: 4px;
            position: absolute;
            top: 1px;
            transform: rotate(45deg) scaleY(0);
            transform-origin: center;
            transition: transform .15s ease-in .05s;
            width: 3px;
          }
        }
        .el-radio__label {
          font-size: 12px;
        }
      }
    }
    .scoring-radio {
      flex-wrap: nowrap;
      .el-radio {
        margin-right: 16px;
        & + .el-radio {
        margin-right: 0;
        }
        :deep(.el-radio__label) {
          font-size: 12px;
        }
      }
    }
  }
}
.basic-score-box {
  margin: 0 15px 0 8px;;
  display: flex;
  align-items: center;
  .basic-title {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
  }
  .basic-radio-box {
    margin-left: 10px;
    .scoring-radio {
      flex-wrap: nowrap;
      .el-radio {
        margin-right: 16px;
        & + .el-radio {
        margin-right: 0;
        }
        :deep(.el-radio__label) {
          font-size: 12px;
        }
      }
    }
  }
}
.scoring-box {
  display: flex;
  align-items: center;
  .btn-scoring {
    width: 62px;
    height: 32px;
    border-radius: 6px;
  }
  .scoring-count {
    margin-left: 12px;
    width: 66px;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    border: 1px solid rgba(0,160,233,0.4);
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 24px;
    text-align: center;
  }
  .scoring-unit {
    margin-left: 8px;
    font-weight: 400;
    font-size: 14px;
    color: #4F5A70;
    line-height: 20px;
  }
}

.scoring-table-box {
  margin-top: 20px;
  .scoring-table-header {
    width: 918px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .form-btns-box {
      margin: 0;
    }
  }
  .scoring-table-title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    &::before {
      content: '';
      margin-right: 7px;
      width: 3px;
      height: 10px;
      background: #00A0E9;
    }
  }
  .scoring-table-wrap {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
  }
  .scoring-table-inner-wrap {
    width: 918px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .scoring-table-inner {
    display: flex;
    & + .scoring-table-inner {
      margin-top: 16px;
    }
    .scoring-table-count {
      width: 22px;
      background: #EFF6FF;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 8px 0 0 8px;
      font-weight: 500;
      font-size: 12px;
      color: #00A0E9;
      line-height: 16px;
    }
    .scoring-table {
      width: 896px;
      border-radius: 0 8px 8px 0;
    }
  }
  .scoring-table {
    width: 918px;
    border-radius: 8px;
    border: 1px solid #E4E7EC;
    & + .scoring-table {
      margin-top: 20px;
    }
    .cell-header {
      padding: 8px 0;
      line-height: 16px;
      display: block;
    }
    :deep() {
      & th, & td {
        border-left: 1px solid #E4E7EC;
        height: 34px;
        padding: 0;
        box-sizing: border-box;
        font-weight: 500;
        font-size: 12px;
        color: #333333;
        line-height: 16px;
        &:first-child {
          border: none;
        }
      }
      .tr-end {
        height: 28px;
        background: rgba(253,106,110, 0.1);
        font-weight: 500;
        font-size: 14px;
        color: #FD6A6E;
        line-height: 20px;
        &:hover > td {
          background-color: transparent;
        }
        td {
          height: 28px;
          border: 1px solid rgba(253,106,110,0.59);
          .cell {
            line-height: 1;
          }
        }
      }
    }
    .scoring-select {
      width: 90px;
      :deep(.el-select__wrapper) {
        box-shadow: none;
        font-size: 12px;
        .el-select__selected-item {
          text-align: center;
        }
      }
    }
    .scoring-ipt {
      :deep(.el-input__wrapper) {
        box-shadow: none;
        background: #fff !important;
        .el-input__inner {
          font-weight: 500;
          font-size: 12px;
          color: #00A0E9;
          line-height: 16px;
          text-align: center;
        }
      }
      &.scoring-ipt-wran {
        :deep(.el-input__wrapper) {
          .el-input__inner {
            color: #FD6A6E;
          }
        }
      }
    }
    .scoring-radio {
      flex-wrap: nowrap;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 0;
      .el-radio {
        height: 24px;
        margin-right: 0;
        :deep(.el-radio__label) {
          font-size: 12px;
        }
      }
    }
    .scoring-checkbox {
      flex-wrap: nowrap;
      &.el-checkbox {
        margin-right: 16px;
        & + .el-checkbox {
         margin-right: 0;
        }
        :deep(.el-checkbox__label) {
          font-size: 12px;
        }
      }
    }
    .scoring-txt {
      font-weight: 500;
      font-size: 12px;
      color: #00A0E9;
      line-height: 16px;
      text-align: center;
    }
  }
  .count-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .scoring-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 67px;
    background: #EFFAFF;
    border-radius: 8px;
    border: 1px solid #DBF4FF;
    .time-label-wrap {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 14px;
      color: #333;
      line-height: 20px;
      .time-label {
        margin-right: 8px;
      }
      .time-count {
        color: #00A0E9;
      }
    }
    .timer-box {
      margin-top: 10px;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 14px;
      color: #333;
      line-height: 20px;
      .timer-item-ipt {
        width: 28px;
        height: 28px;
        :deep() {
          .el-input__wrapper {
            padding: 0;
            border-radius: 6px;
            background-color: #fff !important;
            &:not(.is-focus) {
              box-shadow: none !important;
            }
            .el-input__inner {
              text-align: center;
            }
          }
          input::-webkit-outer-spin-button,
          input::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }
          input[type='number'] {
            -moz-appearance: textfield;
          }
        }
      }
      .timer-split {
        margin: 0 8px;
      }
    }
  }
}

.form-btns-box {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  .form-btn {
    width: 74px;
    height: 32px;
    border-radius: 6px;
    & + .form-btn {
      margin-left: 16px;
    }
  }
  .btn-set-zero,
  .btn-set-full {
    color: #00A0E9;
    background: #fff;
    &:hover {
      color: #fff;
      background: #00A0E9;
    }
  }
  .btn-set-zero {
    width: 92px;
  }
}
</style>
